<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <div class="info-box">
          <!-- 图片 -->
          <van-image fit="cover" round :src="item.aut_photo" />
          <div class="txt-box">
            <div>{{ item.aut_name }}</div>
            <div>{{ item.content }}</div>
            <!-- 再加一行 -->
            <div class="time-box">
              <div class="time">{{ item.pubdate | relvTime }}</div>
              <van-button @click="showReply(item)" size="mini">回复({{ item.reply_count }})</van-button>
            </div>
          </div>
          <!-- 图标 -->
          <van-icon name="like-o" />
        </div>
      </van-cell>
    </van-list>

    <!-- 发表评论区域 -->
    <div class="send-box">
      <van-field
        v-model="msg"
        center
        clearable
        placeholder="请输入要发表的评论"
      >
        <template #button>
          <van-button @click="send" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>

    <!-- 回复区域 -->
    <!-- v-model绑定的replyShow为false，仅仅只是隐藏 -->
    <!-- 所以不会让reply重新创建，而我们此时就需要他每次显示都是重新创建 -->
    <!-- 那就意味着我需要reply隐藏时就是直接销毁 -->
    <!-- 什么样的语句是控制创建和销毁？用v-if,所以意味着要给reply加v-if -->
    <van-action-sheet v-model="replyShow" title="发表回复">
      <!-- v-if这句话一加，代表的意思是当sheet隐藏了，那么reply就销毁 -->
      <!-- 当sheet显示了就reply重新创建(新的数据新的请求) -->
      <reply v-if="replyShow" :currentItem="currentItem"/>
    </van-action-sheet>
  </div>
</template>

<script>
// 导入接口
import { commentAPI, sendCmtAPI } from "@/api/comment";
// 导入评论组件
import reply from "./reply";
export default {
  components: {
    reply,
  },
  data() {
    return {
      replyShow: false,
      currentItem: {},
      // 用来双向绑定输入的内容
      msg: "",
      list: [],
      loading: false,
      finished: false,
      offset: null,
    };
  },
  methods: {
    // 回复的点击事件
    showReply (item) {
      // 显示出回复列表
      this.replyShow = true
      // 把数据给currentItem,就相当于传递给子组件了
      this.currentItem = item
    },
    // 发表的点击事件
    async send() {
      // 非空判断
      if (this.msg == "") return this.$toast("请输入评论内容");

      // 就要发请求去发送评论
      const res = await sendCmtAPI({
        target: this.$route.query.id,
        content: this.msg,
      });

      // 代表把发表成功的评论加到数组里就能立即渲染
      this.list.unshift(res.data.new_obj);
      // 给用户一个成功的提示
      this.$toast.success("发表成功！");
      // 清空输入的内容
      this.msg = "";
    },
    //  list加载数据写到onLoad
    async onLoad() {
      const res = await commentAPI({
        type: "a", //代表获取评论
        // 获取评论传文章id
        source: this.$route.query.id,
        offset: this.offset,
      });

      this.offset = res.data.last_id;

      this.list.push(...res.data.results);
      // 本次查完了
      this.loading = false;

      // 如果查完了要做判断是否全部查询完，把finished改为true即可
      if (this.list.length >= res.data.total_count) {
        this.finished = true;
      }
    },
  },
};
</script>

<style scoped lang="less">
::v-deep {
  .info-box {
    display: flex;
    .van-image {
      width: 40px;
      height: 40px;
    }
    .txt-box {
      flex: 1;
      margin-left: 10px;
    }
    .time-box {
      display: flex;
      .time {
        color: gray;
        font-size: 12px;
        margin-right: 10px;
      }
    }
  }

  .send-box {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}
</style>